正最近在设计一个拖拽交互,参考了很多线上产品的案例,发现这里面不简单。 为了让拖拽的体验更真实,需要给用户提供很多反馈效果。 大部分产品都只做了一部分反馈效果,用起来也够了,但更充足的反馈能够带来更「有感」的体验。 例如腾讯文档的收集表,在调整问题顺序时,就用到了拖拽交互: 上图来源:什么叫细节控?看看Google问卷的设计吧 上图可以看到,这个拖拽交互包含有拖动隐喻、悬停状态、拖动状态和吸附功能,和国内很多其它产品比较起来,也算是不错了。 拖动隐喻:卡片左上角的6个点悬停状态:卡片阴影 拖动状态:开始拖动后,卡片变短方便观察和放置吸附功能:放下后自动停放到附近位置 然而,如果你对比一下 Google Form 的拖拽交互,就会发现腾讯收集表还有优化空间: Google Form 拖动起来明显更顺畅,这是腾讯收集表有点小 Bug,我们暂时不看技术层面的事情。 腾讯收集表有的反馈效果,Google Form 一个不少,而且还更到位。 主要差异体现在拖拽状态: 腾讯收集表:只是变短了 Google Form:不但变短,而且还变透明、增加了阴影 阴影倒不是那么重要,主要是多一层强调而已。 Google Form 这个增加透明度的效果才是重点,因为可以让你拖动的时候看清下面的内容!